<template>
    <div class="nav-box">
        <i @click = "goAbout(0)" class="fa fa-home" aria-hidden="true"></i>
        <i @click = "jump(0)" class="fa fa-repeat" aria-hidden="true"></i>
        <i @click = "jump(-1)" class="fa fa-chevron-left" aria-hidden="true"></i>
        <i @click = "jump(1)" class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
</template>
<script setup>
import router from "../../../router";

function jump(target) {
    router.go(target);
}
function goAbout(){
    router.push({name:"About"});
}
</script>

<style scoped lang="scss">
.nav-box {
    -webkit-app-region: no-drag;
    margin: 5px;
    border-radius: 5px;
    overflow: hidden;
    //border: 1px #66f solid;
    height: 30px;
    width: 160px;
    i:hover {
        background: rgba(255, 255, 255, 0.2);
        transition: 0.3s;
    }
    i {
        cursor: pointer;
        display: inline-block;
        text-align: center;
        float: left;
        font-size: 20px;
        width: 40px;
        height: 30px;
        line-height: 30px;
        vertical-align: top;
        transition: 0.2s;
    }
}
</style>
